<template>
  <ContentWrap>
    <el-form :model="queryForm" :inline="true" label-width="120px">
      <el-form-item label="商品名称">
        <el-input
          v-model="queryForm.productName"
          class="!w-240px"
          placeholder="请输入商品名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="门店名称">
        <!-- 请选择门店 -->
        <el-select v-model="queryForm.storeId" class="!w-240px" clearable placeholder="请选择门店">
          <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <!-- 时间 -->
      <el-form-item label="时间">
        <el-date-picker
          class="!w-240px"
          v-model="queryForm.createTime"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
        />
      </el-form-item>
      <!-- 查询 -->
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <el-table :data="tableData" :loading="loading" :show-overflow-tooltip="true" :stripe="true">
      <el-table-column label="操作人" prop="creatorName" align="center" />
      <el-table-column label="商品信息" prop="productName" align="center" />
      <el-table-column label="操作时间" prop="createTime" align="center">
        <template #default="scope">
          {{ formatDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作类型" prop="changeType" align="center">
        <template #default="scope">
          {{ ChangeTypeName[scope.row.changeType] }}
        </template>
      </el-table-column>
      <el-table-column label="操作内容" prop="changeCount" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.changeCount < 0 ? 'danger' : 'success'">{{
            scope.row.changeCount
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作前库存" prop="beforeStock" align="center" />
      <el-table-column label="操作后库存" prop="afterStock" align="center" />
      <el-table-column label="所属门店" prop="storeName" align="center" />
      <el-table-column label="备注" prop="remark" align="center" />
    </el-table>
    <Pagination
      :total="total"
      :page-size="queryForm.pageSize"
      :page-no="queryForm.pageNo"
      @change="handleQuery"
    />
  </ContentWrap>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, onMounted } from 'vue'
import {
  getSimpleDeliveryPickUpStoreList,
  getSingleItemStockRecord
} from '@/api/mall/trade/delivery/pickUpStore/index'
import { formatDate } from '@/utils/formatTime'
const state = reactive({
  queryForm: {
    productName: '',
    storeId: '',
    createTime: '',
    pageNo: 1,
    pageSize: 10
  }
})
const { queryForm } = toRefs(state)
const total = ref(0)
const tableData = ref<any>([])
const loading = ref(false)
const storeList = ref<any>([])

enum ChangeType {
  WRITE_OFF = 'WRITE_OFF',
  IN_STOCK = 'IN_STOCK',
  REGULAR_INVENTORY = 'REGULAR_INVENTORY'
}
enum ChangeTypeName {
  WRITE_OFF = '销售库存',
  IN_STOCK = '采购库存',
  REGULAR_INVENTORY = '盘点库存'
}
const getStoreList = async () => {
  const res = await getSimpleDeliveryPickUpStoreList()
  storeList.value = res
}
const handleQuery = () => {
  getRecordList()
}
const resetQuery = () => {
  queryForm.value.productName = ''
  queryForm.value.storeId = ''
  queryForm.value.createTime = ''
  queryForm.value.pageNo = 1
  getRecordList()
}
const getRecordList = async () => {
  const res = await getSingleItemStockRecord(queryForm.value)
  tableData.value = res.list
  total.value = res.total
  console.log(res)
}
onMounted(() => {
  getStoreList()
  getRecordList()
})
</script>
